<div class="pannel-default">
    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
        <nz-tab [nzTitle]="role.edit">
            <div nz-row nzType="flex" nzGutter="16">
                <div nz-col nzSpan="8">
                    <nz-card [nzTitle]="role.title2">
                        <form nz-form [formGroup]="validateForm">
                            <nz-form-item>
                                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">{{'system.role.name'|translate}}</nz-form-label>
								<nz-form-control [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.zh_CN_name">
                                    <nz-input-group nzAddOnBefore="{{'chinese' | translate}}">
                                        <input type="text" formControlName="zh_CN_name" nz-input placeholder="{{'placeholder.input'|translate}}{{'system.role.name'|translate}}" />
                                    </nz-input-group>
                                </nz-form-control>
                                <nz-form-control nzOffset="6" [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.en_US_name">
                                    <nz-input-group nzAddOnBefore="{{'english' | translate}}">
                                        <input type="text" formControlName="en_US_name" nz-input placeholder="{{'placeholder.input'|translate}}{{'system.role.name'|translate}}" />
                                    </nz-input-group>
                                </nz-form-control>
                                <nz-form-control nzOffset="6" [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.ja_JP_name">
                                    <nz-input-group nzAddOnBefore="{{'japanese' | translate}}">
                                        <input type="text" formControlName="ja_JP_name" nz-input placeholder="{{'placeholder.input'|translate}}{{'system.role.name'|translate}}" />
                                    </nz-input-group>
                                </nz-form-control>
                            </nz-form-item>
                            <nz-form-item>
                                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="memo" nzRequired>{{'system.role.memo'|translate}}</nz-form-label>
                                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('memo')">
                                    <input nz-input id="memo" formControlName="memo" placeholder="{{'placeholder.input'|translate}}{{'system.role.memo'|translate}}" />
                                </nz-form-control>
                            </nz-form-item>
                        </form>
                    </nz-card>
                </div>
                <div nz-col nzSpan="16">
                    <nz-card [nzTitle]="role.title3">
                        <nz-table #expandTable [nzData]="menuTree" [nzFrontPagination]="false" [nzHideOnSinglePage]="true" [nzLoading]="tableLoading">
                            <thead>
                                <tr>
                                    <th nzWidth="10%" nzShowCheckbox [(nzChecked)]="isAllDisplayDataChecked" [nzIndeterminate]="isIndeterminate" (nzCheckedChange)="checkAll($event)"></th>
                                    <th nzWidth="65%">{{'system.menu.name'|translate}}</th>
                                    <th nzWidth="25%">{{'system.menu.path'|translate}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <ng-container *ngFor="let data of expandTable.data">
                                    <tr>
                                        <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus(data)"></td>
                                        <td [nzIndentSize]="0" [nzShowExpand]="!!data.children" [(nzExpand)]="data.expand" (nzExpandChange)="changeExpand($event,data)">
                                            <span style="font-weight:bold;color:#000;"> {{ data.name| menuLanguage }}</span>
                                        </td>
                                        <td>{{ data.path }}</td>
                                    </tr>
                                    <ng-container *ngFor="let item of data.children">
                                        <tr *ngIf="data.expand">
                                            <td nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)="refreshStatus(item)"></td>
                                            <td [nzIndentSize]="35" [nzShowExpand]="!!item.children" [(nzExpand)]="item.expand">
                                                <span style="color:#666;"> {{ item.name| menuLanguage }}</span>
                                            </td>
                                            <td>{{ item.path }}</td>
                                        </tr>
                                        <ng-container *ngFor="let btn of item.children">
                                            <tr *ngIf="item.expand">
                                                <td nzShowCheckbox [(nzChecked)]="btn.checked" (nzCheckedChange)="refreshStatus(btn)"></td>
                                                <td [nzIndentSize]="70">
                                                    {{ btn.name| menuLanguage }}
                                                </td>
                                                <td>{{ btn.path }}</td>
                                            </tr>
                                        </ng-container>
                                    </ng-container>
                                </ng-container>
                            </tbody>
                        </nz-table>
                    </nz-card>
                </div>
            </div>
            <div style="margin:30px; text-align: center;">
                <button nz-button nzType="default" style="margin:0 10px;" routerLink="/systemMgmt/roleMgmt">{{'cz.cancel'|translate}}</button>
                <button nz-button nzType="primary" style="margin:0 10px;" (click)="submit()">{{'cz.enter'|translate}}</button>
            </div>
        </nz-tab>
    </nz-tabset>
</div>
